<template>
    <div class="personageCompany-personageCompany">
        <div>
            <Tabs value="name1" @on-click="tabSelected">
                <Tab-pane label="人物监控" name="name1">
                    <Radio-group v-model="social1" @on-change="requestMenu($event)">
                        <Radio :label="item.PCACID" v-for="item in person">
                            <span>{{item.PCACName}}</span>
                        </Radio>
                    </Radio-group>
                </Tab-pane>
                <Tab-pane label="企业监控" name="name2">
                    <Radio-group v-model="social2" @on-change="requestMenu($event)">
                        <Radio :label="item.PCACID" v-for="item in enterprise">
                            <span>{{item.PCACName}}</span>
                        </Radio>
                    </Radio-group>
                </Tab-pane>
            </Tabs>

            <div v-if="levelMenu">
                <Radio-group v-model="social2" @on-change="checkedItem($event)">
                    <Radio :label="item.PCACID" v-for="item in levelMenu">
                        <span>{{item.PCACName}}</span>
                    </Radio>
                </Radio-group>
            </div>

            <div>
                <div class="margin_center width_160px">
                    <button type="button" class="btn btn-primary btn-lg btn-block" @click="attention">开始关注</button>
                </div>
            </div>
        </div>

        <div>
            <span>热门人物、企业官方消息实时提醒</span>
            <Dropdown style="margin-left: 20px" @on-click="isSwitchRemind">
                <Button type="primary">
                    开启提醒
                    <Icon type="arrow-down-b"></Icon>
                </Button>
                <Dropdown-menu slot="list">
                    <Dropdown-item selected name="on">开启提醒</Dropdown-item>
                    <Dropdown-item name="off">关闭提醒</Dropdown-item>
                </Dropdown-menu>
            </Dropdown>
            <span>开启提醒服务后，系统将通过微信实时提醒动态更新</span>
        </div>

        <div>
            <Tabs value="name1">
                <Tab-pane label="动态提醒" name="name1">
                    <Table :columns="newsColumns" :data="newsData"></Table>
                    <div class="page_center">
                        <Page :total="newsPageInfo.pageCount" :page-size="newsPageInfo.pageSize" show-elevator @on-change="onPageChange"></Page>
                    </div>
                </Tab-pane>
                <Tab-pane label="我的监控列表" name="name2">
                    <monitoring-list v-if="monitoringList.data.length > 0" :options="monitoringList"></monitoring-list>
                    <p v-else style="margin: 20px; text-align: center;">暂无数据</p>
                </Tab-pane>
            </Tabs>
        </div>

    </div>
</template>

<script type="text/ecmascript-6">
    import $ from "jquery"
    import DATADICTIONARY from '../../config/videoDictionary'
    import getData from '../../api/getData'
    import monitoringList from './child/monitoringList'

    let renderList = function(h, params){
    	var list = [];
    	for( let i = 0; i < params.row.list.length /*&& i < 6*/; i++){
            list.push( h('span', params.row.list[i]) );
        }
//        if(params.row.list.length > 6){
//    		list.push( h('span', {
//                on: {
//                    click: () => {
//                    	//暂未实现功能
//                    	list.pop();
//                        for( let i = 6; i < params.row.list.length; i++){
//                            list.push( h('span', params.row.list[i]) );
//                        }
//                    }
//                }
//            }, '更多') );
//        }
        return list;
    };

    export default {
        data: function () {
            return {
                allOneData: [],
                social1: null,
                social2: null,
                person: null,
                enterprise: null,
                levelMenu: null,
                observer: null,
                allLists: null,
                currentTab: 'name1',
                newsColumns: [
                    {
                        title: '序号',
                        key: 'index',
                        width: 80
                    },
                    {
                        title: '标题',
                        key: 'PCADTitle'
                    },
                    {
                        title: '操作',
                        key: 'operation',
                        ellipsis: true,
                        render: (h, params) => {
                            return h('div', [
                                h('a', {
                                    attrs: {
                                        href: params.row.PCADURL,
                                        target: '_blank'
                                    },
                                }, '点此查看')
                            ]);
                        }
                    },
                    {
                        title: '更新时间',
                        key: 'RDate'
                    }
                ],
                newsData: [],
                newsPageInfo: {
                	pageIndex: 1,
                    pageSize: 8,
                    pageCount: 0
                },
                monitoringList: {
                	columns: [
                        {
                            __rowspan: true,
                            title: '类型',
                            key: 'type',
                            width: 150
                        },
                        {
                            title: '主题',
                            key: 'title',
                            width: 180
                        },
                        {
                            title: '列表',
                            key: 'list',
                            render: (h, params) => {
                                return h('div', renderList(h, params) );
                            }
                        }
                    ],
                    data:[]
                }
            }
        },
        components: {
            monitoringList
        },
        computed: {
            //三级菜单的显示状态
            menuFlag: function () {
                return !!this.levelMenu
            }
        },
        created(){
            //初始化页面
            this.initPage();
            //获取动态列表
            this.getDynamicNews();
            //获取监控列表
            this.getMonitoringList();
        },
        mounted: function () {
            $("#qiutiContainer").windstagball({
                radius: 120,
                speed: 10
            });
        },
        methods: {
            //初始化页面
            initPage: function () {
                var self = this;
                //获取全部得自定义一级类目
                getData.post("getAllOneData")
                    .then(function (res) {
                        if (res.data.code == 0) {
                            var lists = res.data.data;
                            //获取二级类目全部
                            lists.map(function (data) {
                                if (data.PCACName === '人物') {
                                    getData.post("getTwoDataByPCACID", {PCACID: data.PCACID})
                                        .then(function (res) {
                                            if (res.data.code == 0) {
                                                self.person = res.data.data
                                            } else {
                                                self.$Message.error(res.data.msg)
                                            }
                                        })
                                        .catch(function (res) {
                                            self.$Message.error(res.data.msg)
                                        });
                                } else {
                                    getData.post("getTwoDataByPCACID", {PCACID: data.PCACID})
                                        .then(function (res) {
                                            if (res.data.code == 0) {
                                                self.enterprise = res.data.data
                                            } else {
                                                self.$Message.error(res.data.msg)
                                            }
                                        })
                                        .catch(function (res) {
                                            self.$Message.error(res.data.msg)
                                        });
                                }
                            })
                        } else {
                            self.$Message.error(res.data.msg)
                        }
                    })
                    .catch(function (res) {
                        self.$Message.error(res.data.msg)
                    });
            },

            // 是否开启提醒
            isSwitchRemind: function () {
                console.dir(arguments);
            },

            //开始关注的动作
            attention: function () {
                var self = this;
                getData.post("insertPCAttention", {PCASCID3: self.observer})
                    .then(function (res) {
                        if (res.data.code === 0) {
                            console.log(res.data)
                        } else {
                            self.$Message.error(res.data.msg)
                        }
                    })
            },
            //切换二级菜单
            tabSelected: function (s) {
                this.levelMenu = null;
                this.observer = null;
                this.currentTab = s;
            },
            //请求三级菜单
            requestMenu: function (id) {
//                console.log(id)
                var self = this;
                getData.post("getThreeDataByPCACID2", {PCACID2: id})
                    .then(function (res) {
                        if (res.data.code === 0) {
                            self.levelMenu = res.data.data;
                        } else {
                            self.$Message.error(res.data.msg)
                        }
                    })
            },
            //选中三级菜单
            checkedItem: function (id) {
//                console.log(id)
                this.observer = id;
            },
            //获取动态提醒
            getDynamicNews: function () {
                var self = this;
                getData.post("getFigureAttention", {
                	pageSize: self.newsPageInfo.pageSize,
                    pageIndex: self.newsPageInfo.pageIndex
                }).then(function (res) {
                        if (res.data.code === 0) {
                            self.newsPageInfo.pageCount = res.data.PageCount;
                            var tempData = res.data.data;
                            self.formatNewsData( tempData );
                        } else {
                            self.$Message.error(res.data.msg)
                        }
                    })
            },

            //格式化动态提醒表格数据
            formatNewsData: function( data ){
                var tableData = [];
                data.forEach(function(value, index){
                    var colObj = {
                        id: value.PCACID,
                        index: index + 1,
                        PCADTitle: value.PCADTitle,
                        PCADURL: value.PCADURL,
                        RDate: value.RDate
                    };
                    tableData.push( colObj );
                });
                this.newsData = tableData;
            },

            //动态提醒分页回调
            onPageChange(page, item){
                this.newsPageInfo.pageIndex = page;
                this.getDynamicNews();
            },

            //监控列表
            getMonitoringList: function () {
                var self = this;
                getData.post("figureGetData").then(function (res) {
                    if (res.data.code === 0) {
                        var tempData = res.data.data;
                        self.formatMonitoringList( tempData );
                    } else {
                        self.$Message.error(res.data.msg)
                    }
                })
            },

            //格式化监控列表表格数据
            formatMonitoringList: function( data ){
                var tableData = [];
                data.forEach(function(value, index){
                    value.PSC.forEach(function(pcs, i){

                		let tempList = [];
                		pcs.PSC.forEach(function(item){
                			tempList.push(item.keyName);
                        });

                        let colObj = {
                            type: value.keyName,
                            title: pcs.keyName,
                            list: tempList
                        };
                        tableData.push( colObj );
                    });

                });
                this.monitoringList.data = tableData;
            }
        }
    }
</script>

<style scoped lang="scss">
    #qiutiContainer.qiuti-label {
        position: relative;
        width: 350px;
        height: 350px;
        border: 1px solid #000;
        margin: 20px auto 0;
    }

    #qiutiContainer.qiuti-label a {
        position: absolute;
        top: 0px;
        left: 0px;
        font-family: Microsoft YaHei;
        color: #000;
        font-weight: bold;
        text-decoration: none;
        padding: 3px 6px;
    }

    #qiutiContainer.qiuti-label a:hover {
        border: 1px solid #eee;
        background: #FFF;
    }

    #qiutiContainer.qiuti-label .blue {
        color: blue;
    }

    #qiutiContainer.qiuti-label .red {
        color: red;
    }

    #qiutiContainer.qiuti-label .green {
        color: green;
    }

    .monitoring-list td{
        width: 100px;
        height: 40px;
        text-align: center;
        border: 1px solid #EEEEEE;
    }
</style>
